<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <title>图片上传</title>
    <style>
    body {
        margin: 0;
        padding: 0;
    }
    .iconbox{
        margin: 0;
        padding: 0;
    }
    .icon{
        float: left;
        margin: 0 10px 10px 0;
        width: 100px;
        height: 100px;
        text-align: center;
        overflow: hidden;
        border: 1px solid #CCC;
        line-height: 100px;
        position: relative;
    }
    .icon img{
        max-height:100px;
    } 
    .icon .remove{
        position: absolute;
        width: 40px;
        height: 20px;
        top: 0;
        right: 0;
        line-height: 20px;
        font-size: 12px;
        color: #FFF;
        background: #C00;
        cursor: pointer;
    }
    .file_box {
        display: inline-block;
        float: left;
        margin: 0 10px 10px 0;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #FFF;
        background: #3E4B5B;
        position: relative;
        overflow: hidden;
        margin: 0 0 10px 0;
    }
    .file_box:hover {
        color: #fff;
    }
    #uploadicon {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 100px;
        opacity: 0;
    }
	.c{clear:both;}
    </style>
    <script src="__ADMIN__/js/jquery-1.11.3.min.js" type="text/javascript"></script>
</head>

<body>
	<input type="hidden" value="{$url}" name="{$name}" id="Img">
	<div class="iconbox">
		<div id="thumbnail">
        <a class="file_box">＋<input type="file" name="{$name}" id="uploadicon" multiple="multiple" value="上传"/></a>
		{volist name="images" id="val"}
			<div class="icon"><img class="iconimg" src="{$val}"><div class="remove">移除</div></div>
		{/volist}
		</div>
		<div class="c"></div>
	</div>
    <script type="text/javascript">
		$('#{$name}',parent.document).val("{$url}"); 
        $('#uploadicon').on("change",function(){
			uploadFile('uploadicon');
        });

		$("#thumbnail").on("click",".remove",function(){
			$(this).parent().remove();
			var url="";
            $('.iconimg').each(function(index){
                if(index!=0) url+='|';
                url+=$(this).attr('src');
            });
			$('#Img').val(url);
			$('#{$name}',parent.document).val(url); 
		});

		function uploadFile(ele){
			var formData = new FormData();
			var files = $('#'+ele)[0].files;
			for(var i = 0;i < files.length;i++){
				var name = files[i].name;              
				var file = files[i];
				formData.append("file" + i, file);
				formData.append("name" + i, name);
			}									
			$.ajax({
				url: "{:url('upload/uploadpics')}",
				type: 'POST',
				data: formData,
				processData: false,
				contentType: false,
				success: function (res) {     
					console.log(res);
					if(res.code=='1'){
						var imagesUrl = $("#Img").val();
						if(imagesUrl != ''){
							$("#Img").val(imagesUrl+'|'+res.urls);
							$('#{$name}',parent.document).val(imagesUrl+'|'+res.urls); 
						}else{
							$("#Img").val(res.urls);
							$('#{$name}',parent.document).val(res.urls); 
						}
						
						for(var i=0;i<res.url.length;i++){
							$("#thumbnail").append('<div class="icon"><img class="iconimg" src="'+res.url[i]+'"><div class="remove" val="'+res.url[i]+'">移除</div></div>');
						}
					}else{
						alert(res.msg);
					}
				},
				error : function (responseStr) {
					alert("上传失败，请联系管理员进行处理");
				}
			});
		}
    </script>
</body>
</html>